<template>
  <div>
    <div class="wordcover_full">
      <div class="title">
        <span class="beforetop" v-show="types==='top'">Top</span>
        <span class="beforetitle" v-show="types==='list'"></span>
        {{viewed.title}}
      </div>
      <span class="author">{{viewed.author}}</span>
      <span class="date">{{viewed.date}}</span>
      <div class="words_full" v-html="viewed.words"></div>
      <div class="others_full">
        <div class="icons">
              <span @click="$emit('good')" style="cursor:pointer">
                <span class="iconfont icon-good"></span>
                {{viewed.good}}
              </span>

          <span style="margin-left:10px;"></span>
          <span @click="$emit('bad')" style="cursor:pointer">
                <span class="iconfont icon-bad"></span>
                {{viewed.bad}}
              </span>
          <span style="margin-left:10px;"></span>
          <span class="iconfont icon-code"></span>
          {{viewed.comment}}
        </div>
        <div class="saw">被浏览{{viewed.saw}}次</div>
        <div class="org" @click="home">返回主页</div>
      </div>
    </div>
    <div class="commentcover undis">
      <transition name="bounce">
        <div v-show="!opencom" class="subtitle1 ">
          <p>关于这篇文章 共有{{viewed.comment}}篇评论&nbsp;&nbsp;&nbsp;<a href="Javascript:console.log('hello world');" @click="open">查看全部</a></p>
        </div>
      </transition>
      <div class="subtitle2">
        <input type="text" v-model="commenttext"  class="commentarea">
        <div class="sendcomment" @click="send">评论！</div>
      </div>
      <div v-show="opencom" class="allcomments">
        <transition-group name="fade" tag="div">
          <div class="commentcontainer" v-for="item in comments" :key="item.id">
              <h5>
                <span style="float: left">{{item.user}}</span>
                <span style="float: right">发表于{{item.date}}</span>
              </h5>
            <br>
            <p>{{item.comment}}</p>
          </div>
        </transition-group>

      </div>

    </div>
  </div>
</template>

<script>
  export default {
    name: 'Wordcover_full',
    props: ['viewed', 'types'],
    components: {},
    data() {
      return {
        comments:[],
        opencom:false,
        commenttext:''
      }
    },
    methods: {
      home(){
        this.$emit('home');
        this.$store.commit('setViewing',false);
        this.opencom=false;
        this.comments=[];
        this.commenttext='';
      },
      open(){
        this.getcomment(()=>{this.opencom=true;});
      },
      getcomment(callback){
        this.$http.post('/api/14ch/getcomment',{id:this.viewed.id}).then((res)=>{
          this.comments=res.data.comments;
          if(callback) callback();
        });
      },
      send() {
        this.$http.post('/api/14ch/sendcomment', {id: this.viewed.id, comment: this.commenttext}).then((res) => {
          this.commenttext = '';
          this.$emit('update');
          this.getcomment();
        })
      },
    },
    created() {

    },
    mounted() {

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .wordcover_full {
    z-index: 100;
    display: block;
    position: absolute;
    min-height: 80%;
    background: #f6f6f6;
    border-radius: 5px;
    box-shadow: 0 1px 2px #bcbcbc;
    overflow-y: auto;
    transition: all 0.5s ease;
  }
   p{
    font-weight: 600;
    font-size:14px;
    margin:10px;
    text-align: left;
    color: #555;
    text-shadow: 0 0 6px #ffffff;
  }
  .commentcover{
    position: absolute;
    top:calc(80% + 30px);
    background: #f6f6f6;
    border-radius: 5px;
    min-height:calc(20% - 50px);
    margin-bottom:10px;
    box-shadow: 0 1px 2px #bcbcbc;
  }
  .commentcontainer{
    display: block;
    /*position: absolute;*/
    margin-left:5%;
    width:90%;
    /*top:50px;*/
    line-height: normal;
    border-radius: 5px;
    overflow-x: hidden;
    /*background-color: #fff;*/
    /*box-shadow:inset 0 0 4px #cbcbcb;*/
    min-height:60px;
  }
  .subtitle1{
    height:30px;
    transition:all 0.5s ease;
  }
  .subtitle2{
    /*position: relative;*/
    margin:10px;
    width:100%;
    transition:all 1s ease;
  }
  .allcomments{
    /*position:;*/
    margin-top:50px;
    width:100%;
  }
  .commentarea {
    display: block;
    position: absolute;
    /*top: 1px;*/
    left: 15px;
    border-radius: 5px;
    line-height:30px;
    box-sizing: border-box;
    border: 1px solid #e9e9e9;
    width: calc(100% - 85px);
    height: 30px;
  }
  .sendcomment {
    cursor: pointer;
    position: absolute;
    /*top: 0;*/
    left: calc(100% - 65px);
    width: 55px;
    line-height: 30px;
    height: 28px;
    font-size: 12px;
    background: #fff;
    /*border: none;*/
    border: 1px solid #e9e9e9;
    /*box-shadow: 0 0 2px #e9e9e9;*/
    border-radius: 5px
  }
  .beforetitle {
    display: inline-block;
    position: relative;
    left: 1px;
    top: 2px;
    width: 5px;
    height: 25px;
    background: #e0e0e0;
  }
  .title {
    display: block;
    position: absolute;
    left: 5px;
    top: 4px;
    line-height: 45px;
    width: calc(100% - 10px);
    height: 40px;
    font-size: 26px;
    background: #fff;
    box-shadow: 1px 1px 2px #e9e9e9;
    font-weight: bold;
    text-align: left;
    border-radius: 5px;
  }
  .author {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 11px;
    font-weight: 800;
    line-height: 10px;
  }
  .date {
    position: absolute;
    right: 10px;
    top: 25px;
    /*float: right;*/
    font-size: 11px;
    font-weight: normal;
    /*line-height: 55px;*/
    line-height: 10px;
  }
  .icons {
    position: absolute;
    top: 0;
    left: 0;
  }
  .saw {
    position: absolute;
    top: 25px;
    left: 0;
    font-size: 12px;
  }
  .beforetop {
    display: inline-block;
    position: relative;
    left: 1px;
    top: -5px;
    width: 30px;
    height: 25px;
    font-size: 15px;
    background: #d1e5fb;
    color: #fff;
    line-height: 25px;
  }

  .others_full {
    position: absolute;
    top: calc(100% - 50px);
    left: 10px;
    width: calc(100% - 20px);
    /*height: 50px;*/
  }
  .org {
    cursor: pointer;
    position: absolute;
    top: 20px;
    left: calc(100% - 100px);
    width: 80px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    background: #fff;
    box-shadow: 0 0 1px #e9e9e9;
    border-radius: 5px
  }
  @media (min-width: 768px){
    .undis{
      display: none;
    }
    .wordcover_full {
      width: 860px;
      height:auto;
      min-height: 400px;
      left: calc(50% - 620px);
      top:60px;
      background: #ffffff;
      box-shadow: none;

    }
    .words_full {

    }
    .title{
      box-shadow: none;
    }


  }
  @media (max-width: 768px) {

    .words_full {
      display: block;
      position: absolute;
      left: 5px;
      top: 45px;
      width: calc(100% - 10px);
      background: #fff;
      text-align: left;
      line-height: normal;
      border-radius: 5px;
      box-shadow: 1px 1px 2px #e9e9e9;
      height:calc(90% - 70px);
      text-overflow: clip;
      overflow-x: hidden;
    }

    .author {
      top: 50px;
      right: 75px;
    }

    .date {
      top: 50px;
    }

    .words {

    }


    .saw {
      top: 20px;
      left: 0;
    }

    .org {
      top: 5px;
      height: 35px;
      font-size: 12px;
      left: calc(100% - 75px);
      line-height: 35px;
    }
    .wordcover_full {
      width: 90%;
      left: 5%;
      top: 70px;
      overflow-y:hidden;
      transition: all 0.5s ease;
    }
    .commentcover{
      top:calc(80% + 70px);
      min-height:calc(20% - 20px);
      /*margin-bottom: 10px;*/
      width: 90%;
      left: 5%;
      transition: all 0.5s ease;
    }
  }
  .bounce-leave-active {
    animation: bounce-in .5s reverse;
  }
  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }
  .fade-enter-active, .fade-leave-active {
    transition: all .5s;
  }

  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 0;
  }
</style>
